import React from 'react';
import { Toast, } from 'antd-mobile';

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            data: [],
            id: props.match.params.id*1
        }
    }
	componentDidMount(){
		document.title = '提现方式'
        global.Ajax.hhtc_request('tx/tx_list',{}).then(data=>{
			if(data.code===1){
				this.setState({
                    data: data.data
                })
			}
		})
    }
    // 选择提现方式
    change(id){
        global.Ajax.hhtc_request('tx/change',{id: id}).then(data=>{
			if(data.code===1){
                this.setState({id})
				Toast.success(data.msg,1,()=>{
                    this.props.history.goBack()
                })
			}else{
                Toast.fail(data.msg,1)
            }
		})
    }
	render(){
		return(
			<div className='set_box' style={{minHeight: '100vh',background: '#F5F5F5',}}>
                <p className='title'>选择提现方式</p>
                {this.state.data.map((item,index)=>{
                    var str=item.account
                    
                    if(str){
                        str=str.substring(str.length-4)
                        console.log(str)
                    }
                    return(
                        <div key={'list'+index} className='item'>
                            {item.type===2?
                                <React.Fragment>
                                    <img alt='' src={require('../../imgs/alipay.png')} className='icon' />
                                    {item.id!=undefined?<p>支付宝<span>***{str}</span></p>:<p>支付宝</p>}
                                </React.Fragment>
                            :
                                <React.Fragment>
                                    <img alt='' src={require('../../imgs/card.png')} className='icon' />
                                    {item.id!==undefined?<p>{item.bank_name}<span>***{str}</span></p>:<p>银行卡</p>}
                                </React.Fragment>
                            }
                            
                            {/* <p>{item.type===2?'支付宝':(item.bank_name?'银行卡':item.bank_name)}<span>***567</span></p> */}
                            {item.id!==undefined&&(this.state.id===item.id?<img alt='' src={require('../../imgs/gou3.png')} className='gou' />:<img alt='' src={require('../../imgs/gou1.png')} className='gou' onClick={this.change.bind(this,item.id)} />)}
                            {/* <span onClick={()=>{this.props.history.push('/page/home/user/bindpaytype/2')}}>去绑定</span> */}
                            {item.type===2&&item.account===undefined&&<span onClick={()=>{this.props.history.push('/page/home/user/bindpaytype/2')}}>去绑定</span>}
                            {item.type===1&&item.account===undefined&&<span onClick={()=>{this.props.history.push('/page/home/user/bindpaytype/1')}}>去绑定</span>}
                        </div>
                    )
                })}
			</div>
		)
	}
}
